<!doctype html>
<html>
<head>
 <meta charset="utf-8"/>
 <title>Mouse Stroke i18n Utility</title>
 <script src="http://www.google.com/jsapi"></script>
 <script>
  var _dir = 'mouse-stroke/_locales/';
  var _en;

  google.load("jquery", "1.4.1");
  google.setOnLoadCallback(function() {
    $.ajax({
      url: _dir + 'en/messages.json',
      cache: false,
      dataType: "text",
      success: function(data) {
        var msgid, row, input, div = $('#source'), lang;

	try { lang = eval('(' + data + ')'); }
	catch (e) { console.error(e.stack); return; }

        div.html('');
        for (msgid in lang) {
          row = document.createElement('p');
          input = document.createElement('textarea');
	  row.innerHTML = '<code>' + msgid + '</code><br/>';
          input.id = msgid;
          input.value = lang[msgid].message;
	  input.className = msgid.replace(/^([^_]+).*$/, '$1');
          row.appendChild(input);
          div.append(row);
        }
	_en = lang;
      },
      error: function() {
        console.log(arguments);
      },
      complete: function() {
        console.log(arguments);
      }
    });

    $('#locale').change(function(e) {
      $.ajax({
        url: _dir + e.target.value + '/messages.json',
        cache: false,
        dataType: "text",
        success: function(data) {
          var msgid, input, lang;

          try { lang = eval('(' + data + ')'); }
          catch (e) { console.error(e.stack); return; }

          for (msgid in lang) {
            input = $('#' + msgid);
	    if (input.is('textarea')) {
	      input.val(lang[msgid].message);
	    }
	  }
        },
        error: function() {
          console.log(arguments);
        },
        complete: function() {
          console.log(arguments);
        }
      });
    });

    $('#generate').click(function(e) {
      var msgid, msg, lang = {};
      for (msgid in _en) {
        lang[msgid] = _en[msgid];
	if (msg = $('#' + msgid).val())
	  lang[msgid].message = msg;
      }
      $('#result').text($('#locale').val() + '\n\n' + JSON.stringify(lang));
      var range = document.createRange();
      range.selectNode($('#result')[0]);
      window.getSelection().addRange(range);
    });
  });
 </script>
 <style>
   textarea { width: 95% }
   .text { height: 10em }
   pre { border: dashed 2px red; margin: 1em; padding: 1em; white-space: pre-wrap }
 </style>
</head>
<body>
 <ol>
  <li>Select the language you want to translate to</li>
  <li>Translate text in every text box, <strong>REPLACE</strong> the original English text with localized text</li>
  <li>After your are done, click the <em>Get Result</em> button and send the result to &lt;vigacmoe@gmail.com&gt;. You should copy everything inside the red box</li>
  <li><strong>DO NOT</strong> translate anything enclosed by <strong>&lt;</strong> and <strong>&gt;</strong>, for example: <code>&lt;strong&gt;</code> or <code>&lt;a href="http://www.google.com/"&gt;</code></li>
  <li><strong>DO NOT</strong> translate anything between two dollar signs, for example: <code>$label$</code></li>
  <li><strong>DO NOT</strong> close or reload the page until you click the <em>Get Result</em> button and save the result, otherwise all your work will be <strong>LOST</strong></li>
 </ol>
 <p>
  Translate to:
  <select id="locale">
   <option value="en">English</option>
   <option value="am">Amharic</option>
   <option value="ar">Arabic</option>
   <option value="bg">Bulgarian</option>
   <option value="bn">Bengali</option>
   <option value="ca">Catalan</option>
   <option value="cs">Czech</option>
   <option value="da">Danish</option>
   <option value="de">German</option>
   <option value="el">Greek</option>
   <option value="en_GB">English (Great Britan)</option>
   <option value="en_US">English (United States)</option>
   <option value="es">Spanish</option>
   <option value="es_419">Spanish (Latin American)</option>
   <option value="et">Estonian</option>
   <option value="fi">Finnish</option>
   <option value="fil">Filipino</option>
   <option value="fr">French</option>
   <option value="gu">Gujarati</option>
   <option value="he">Hebrew</option>
   <option value="hi">Hindi</option>
   <option value="hr">Croatian</option>
   <option value="hu">Hungarian</option>
   <option value="id">Indonesian</option>
   <option value="it">Italian</option>
   <option value="ja">Japanese</option>
   <option value="kn">Kannada</option>
   <option value="ko">Korean</option>
   <option value="lt">Lithuanian</option>
   <option value="lv">Latvian</option>
   <option value="ml">Malayalam</option>
   <option value="mr">Marathi</option>
   <option value="nb">Norwegian Bokmal</option>
   <option value="nl">Dutch</option>
   <option value="or">Oriya</option>
   <option value="pl">Polish</option>
   <option value="pt">Portuguese</option>
   <option value="pt_BR">Portuguese (Brazil)</option>
   <option value="pt_PT">Portuguese (Portugal)</option>
   <option value="ro">Romanian</option>
   <option value="ru">Russian</option>
   <option value="sk">Slovak</option>
   <option value="sl">Slovenian</option>
   <option value="sr">Serbian</option>
   <option value="sv">Swedish</option>
   <option value="sw">Swahili</option>
   <option value="ta">Tamil</option>
   <option value="te">Telugu</option>
   <option value="th">Thai</option>
   <option value="tr">Turkish</option>
   <option value="uk">Ukrainian</option>
   <option value="vi">Vietnamese</option>
   <option value="zh">Chinese</option>
   <option value="zh_CN">Simplified Chinese</option>
   <option value="zh_TW">Traditional Chinese</option>
  </select>
 </p>
 <div id="source">Please wait...<br/>If you see this message for more than 5 minutes, please try to refresh the page.</div>
 <p><button id="generate">Get Result</button></p>
 <pre id="result"></pre>
</body>
</html>
